<template>
  <!-- 使用el-date-picker组件，绑定必要的属性和事件 -->
  <el-date-picker
    v-model="selectedDate"
    type="datetime"
    :placeholder="placeholder"
    :value-format="valueFormat"
    @change="handleChange"
  >
  </el-date-picker>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'

// 定义组件接收的属性
const props = defineProps({
  placeholder: {
    type: String,
    default: '请选择日期时间'
  },
  modelValue: {
    type: [Date, null],
    default: null
  },
  valueFormat: {
    type: String,
    default: null
  }
})

// 定义组件触发的事件
const emits = defineEmits(['update:modelValue', 'change'])

// 使用ref定义内部数据
const selectedDate = ref(props.modelValue)

watch(
  () => props.modelValue,
  (newValue) => {
    selectedDate.value = newValue
  }
)

// 监听selectedDate的变化
const handleChange = (value) => {
  selectedDate.value = value
  // 触发update:modelValue事件，用于双向绑定
  emits('update:modelValue', value)
  // 触发change事件
  emits('change', value)
}
</script>
